<template>
	<view class="app">
		<view class="Detail">
			<AppNavbar :bgColor="'#fff'" title="Function details" titlecolor="#000" leftIconColor="#000"
				fontWeight="600">
			</AppNavbar>
			<view class="Detail-content">
				<view class="Detail-content-top">
					<view class="Detail-content-top-item" v-for="item in 2">
						<view class="Detail-content-top-item-left">
							Remote video
						</view>
						<view class="Detail-content-top-item-right">
							Video recording can last up to 10minutesRecord up to 50 videos
						</view>
					</view>
				</view>
				<view class="Detail-content-bottom ">

					<view class="Detail-content-bottom-left">
						50GB large space
					</view>
					<view class="Detail-content-bottom-right">
						<view class="Detail-content-bottom-right-item " v-for="item in 4">
							After re opening the member ship:you will restore the Vip privilege service, and when the
							membershipis valid, you can also save yourfavorite videos or photos to yourmobile phone
							album
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,

	} from 'vue';
	const text = ref('Continue for $59.99 total')
	const payShow = ref(false)

	function goto(url) {
		uni.$to(url)
	}
</script>

<style lang="scss" scoped>
	.app {
		.Detail {
			height: 100vh;

			.Detail-content {
				margin-top: 20rpx;
				// border: 1px solid red;
				// height: 90vh;
				display: flex;
				flex-direction: column;

				.Detail-content-top {

					// border: 1px solid black;
					.Detail-content-top-item {
						// width: 100%;
						height: 80px;
						display: flex;
						// padding: 0 32rpx;
						justify-content: space-between;
						align-items: center;

						.Detail-content-top-item-left {
							padding: 0 32rpx;
							display: flex;
							align-items: center;
							height: 100%;
							width: 100px;
							border-top: 1px solid #cecece;
							border-right: 1px solid #cecece;
							box-sizing: border-box;
							font-weight: 900;
							// width: 100px !important;

							// height: 100%;
						}

						.Detail-content-top-item-right {
							// width: 160px;
							padding: 0 32rpx;
							display: flex;
							align-items: center;
							height: 100%;
							font-size: 30rpx;
							border-top: 1px solid #cecece;
							border-right: 1px solid #cecece;

							font-weight: 900;
							flex: 1;
							// height: 100%;
							box-sizing: border-box;

						}
					}
				}

				.Detail-content-bottom {
					// width: 100%;
					// width: 100vw;

					flex: 1;
					// border: 1px solid red;
					display: flex;

					.Detail-content-bottom-left {
						// width: 40%;
						// border: 1px solid;
						// padding: 0 32rpx;
						// border-right: 1px solid;
						border-top: 1px solid #cecece;
						border-right: 1px solid #cecece;
						border-bottom: 1px solid #cecece;
						box-sizing: border-box;
						// width: 160px;
						width: 100px;
						display: flex;
						align-items: center;
						padding: 0 32rpx;
						font-weight: 600;
					}

					.Detail-content-bottom-right {
						// border: 1px solid red;
						// border: ;
						// width: 100%;
						// padding: 0 32rpx;
						border-right: 1px solid;
						box-sizing: border-box;
						flex: 1;

						.Detail-content-bottom-right-item {
							width: 100%;
							border-top: 1px solid #cecece;
							border-bottom: 1px solid #cecece;
							font-size: 30rpx;
							font-weight: 600;
							box-sizing: border-box;
							padding: 32rpx;
						}
					}
				}
			}
		}
	}
</style>